<template>
  <div>
    <div class="tab">
      <div class="title">光与影</div>
    </div>
    <div class="ipt">
      <input type="text" placeholder="釜山行、夏有乔木" @click="handleSearch" />
    </div>
    <div class="container">
      <div>
        <div class="mvTitle">
          <span>top250</span>
          <span @click="handleTop">更多></span>
        </div>
        <div class="content">
          <MovieItem
            v-for="item of topMovie"
            :key="item._id"
            :item="item"
          ></MovieItem>
        </div>
      </div>

      <div>
        <div class="mvTitle">
          <span>正在热映</span>
          <span @click="handleHot">更多></span>
        </div>
        <div class="content">
          <MovieItem
            v-for="item of hotMovie"
            :key="item._id"
            :item="item"
          ></MovieItem>
        </div>
      </div>

      <div>
        <div class="mvTitle">
          <span>即将上映</span>
          <span @click="handleCom">更多></span>
        </div>
        <div class="content">
          <MovieItem
            v-for="item of comMovie"
            :key="item._id"
            :item="item"
          ></MovieItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieItem from "./components/Item.vue";
export default {
  components: {
    MovieItem,
  },
  data() {
    return {
      topMovie: [],
      hotMovie: [],
      comMovie: [],
    };
  },
  methods: {
    handleSearch() {
      this.$router.push("/movie/search");
    },
    getRating(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num >= 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Math.round(num * 10) / 10);
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      return arr;
    },
    handleTop() {
      this.$router.push("/movie/indexKind?kind=top排行");
    },
    handleHot() {
      this.$router.push("/movie/indexKind?kind=正在热映");
    },
    handleCom() {
      this.$router.push("/movie/indexKind?kind=即将上映");
    },
  },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/movie/top250").then((res) => {
      res.data.res.forEach((item) => {
        item.rat = this.getRating(item.rating);
      });
      this.topMovie = res.data.res.slice(0, 3);
    });
    this.$http("http://47.108.197.28:4000/api/movie/inTheaters").then((res) => {
      res.data.res.forEach((item) => {
        item.rating = item.raiting;
        item.rat = this.getRating(item.raiting);
      });
      this.hotMovie = res.data.res.slice(0, 3);
    });
    this.$http("http://47.108.197.28:4000/api/movie/comingSoon").then((res) => {
      res.data.res.forEach((item) => {
        item.rat = this.getRating(item.rating);
      });
      this.comMovie = res.data.res.slice(0, 3);
    });
  },
};
</script>

<style scoped>
.tab {
  position: relative;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background-color: rgb(83, 120, 134);
  color: #fff;
}
.ipt {
  width: 100%;
  height: 80px;
  background-color: #e5e5e5;
}
.ipt input {
  height: 100%;
  width: 100%;
  text-indent: 50px;
  font-size: 30px;
  background-color: initial;
  border: none;
}
.title {
  font-size: 28px;
}
.container > div {
  margin-bottom: 30px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.mvTitle {
  display: flex;
  padding: 0 20px;
  margin: 12px 0;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>